<template>
  <div class="logger  container-fluid">
    <div class="row" v-for="log in logs">
        <div class="col-xs-12">{{ log }}</div>
    </div>
  </div>
</template>

<script>
    /* eslint-disable */
    import service from '@/core/service'
    import eventBus from '@/core/eventBus'

    var data = {
        logs: []
    }


    export default {
        name: 'logger',
        created() {
            this.getData();
            var self = this;
            eventBus.$on('refreshLog', () => {
                self.getData();
            });
        },
        methods: {
            getData: function() {
                this.$Progress.start();
                service.getLog().then((d) => {
                    data.logs = d.reverse();
                    this.$Progress.finish();
                })
            }
        },
        beforeDestroy() {
            eventBus.$off('refreshLog');
        },
        data() {
            return data
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .logger .row {
        padding: 10px 0 10px;
        border-bottom: 1px solid #ddd;
    }
</style>